<script setup lang="ts">
import ReCropper from "@/components/ReCropper";
import { formatBytes } from "@pureadmin/utils";
import { ref } from "vue";
import { uploadCurrentAvatar } from "@/api/system/user";
import { assertResponse } from "@/api/utils";
import { message } from "@/utils/message";
defineOptions({
  name: "userAvatar"
});
const props = defineProps({
  user: {
    type: Object
  }
});
const infos = ref();
const imgBlob = ref();
const id = ref();
const refCropper = ref();
const showPopover = ref(false);
const cropperImg = ref<string>("");

cropperImg.value = props.user.avatar;
function onCropper({ base64, blob, info }) {
  infos.value = info;
  imgBlob.value = blob;
  cropperImg.value = base64;
}

const open = ref(false);
const visible = ref(false);

/** 上传图片 */
function uploadImg() {
  // imgBlob.value 是 Blob，需要包装成 File，并设置文件名和类型
  const blob = imgBlob.value;
  if (!blob) return message("请选择图片", { type: "warning" });

  // 这里给文件一个合理的后缀名（比如png），或者从裁剪组件里拿图片类型
  const file = new File([blob], `avatar_${Date.now()}.png`, {
    type: blob.type || "image/png"
  });

  uploadCurrentAvatar(file)
    .then(res => assertResponse(res, "上传图片失败"))
    .then(() => {
      message("成功上传图片", { type: "success" });
    })
    .finally(() => {
      open.value = false;
      visible.value = false;
    });
}
</script>
<template>
  <div class="user-info-head" @click="open = true">
    <el-avatar :size="120" :src="cropperImg" />
  </div>
  <el-dialog
    v-model="open"
    title="修改头像"
    width="900px"
    append-to-body
    @opened="visible = true"
    @close="visible = false"
  >
    <el-card shadow="never">
      <template #header>
        <div class="card-header">
          <span class="font-medium"> 右键下面左侧裁剪区开启功能菜单 </span>
        </div>
      </template>
      <el-popover
        :visible="showPopover"
        placement="right"
        width="300px"
        :teleported="false"
      >
        <template #reference>
          <ReCropper
            ref="refCropper"
            class="w-[500px]"
            :src="cropperImg"
            circled
            @cropper="onCropper"
            @readied="showPopover = true"
          />
        </template>
        <div class="flex flex-wrap justify-center items-center text-center">
          <el-image
            v-if="cropperImg"
            :src="cropperImg"
            :preview-src-list="Array.of(cropperImg)"
            fit="cover"
          />
          <div v-if="infos" class="mt-1">
            <p>
              图像大小：{{ parseInt(infos.width) }} ×
              {{ parseInt(infos.height) }}像素
            </p>
            <p>
              文件大小：{{ formatBytes(infos.size) }}（{{ infos.size }} 字节）
            </p>
          </div>
        </div>
      </el-popover>
    </el-card>
    <template #footer>
      <div>
        <el-button @click="open = false">取消</el-button>
        <el-button type="primary" @click="uploadImg">保存</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.user-info-head {
  position: relative;
  display: inline-block;
  height: 120px;
}

.user-info-head:hover::after {
  position: absolute;
  inset: 0;
  font-size: 24px;
  font-style: normal;
  line-height: 110px;
  color: #eee;
  cursor: pointer;
  content: "+";
  background: rgb(0 0 0 / 50%);
  border-radius: 50%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</style>
